<template>
  <div class=" overflow-auto bg-white" style="height: 100%;">
    <BasicTree ref="treeRef" title="部门列表" :loading="treeLoading2" toolbar search :clickRowToExpand="false" defaultExpandLevel="1" :treeData="treeData" :fieldNames="{ key: 'orgCode', title: 'orgName' }" @select="handleSelect" />
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, unref, nextTick } from 'vue';

import { BasicTree, TreeItem, TreeActionType } from '/@/components/Tree';
import { getSuitUnitOrg } from '/@/api/common/api';

export default defineComponent({
  name: 'DeptTree',
  components: { BasicTree },

  emits: ['select'],
  setup(_, { emit }) {
    const treeData = ref<TreeItem[]>([]);
    const treeRef = ref<Nullable<TreeActionType>>(null);
    const treeLoading2 = ref(false);
    //初始化
    onMounted(async () => {
      await init();
    });

    async function init() {
      treeLoading2.value = true;
      treeData.value = (await getSuitUnitOrg()) as unknown as TreeItem[];
      nextTick(() => {
        unref(treeRef)?.filterByLevel(1);
        treeLoading2.value = false;
      });
    }

    function handleSelect(keys) {
      emit('select', keys[0]);
    }

    return {
      treeData,
      treeRef,
      treeLoading2,
      handleSelect
    };
  },
});
</script>
